<template>
  <el-card class="card">
    <el-container class="cardBody" v-loading="loading" element-loading-text="努力加载中...">
      <el-row class="cardHeader">
        <el-col :span="10">个人信息</el-col>
      </el-row>
      <el-row class="cardContent">
        <el-col class="userBodyInfo">
          <el-row class="userBodyInfoItem">
            <font-awesome-icon :icon="['fas','fa-clock']" style="margin-right: 5px;color: #00CAC9"></font-awesome-icon>
            <el-text v-show="userInfoReport.createdDate">开始记录：{{ userInfoReport.createdDate  }}</el-text>
          </el-row>
          <el-row class="userBodyInfoItem">
            <font-awesome-icon :icon="['fas','fa-user']" style="margin-right: 5px;color: #00CAC9"></font-awesome-icon>
            <el-text>姓名：{{ userInfoReport.name }}</el-text>
          </el-row>
          <el-row class="userBodyInfoItem">
            <font-awesome-icon :icon="['fas','fa-male']" style="margin-right: 5px;color: #00CAC9"></font-awesome-icon>
            <el-text>身高：{{ userInfoReport.height }}cm</el-text>
          </el-row>
          <el-row class="userBodyInfoItem">
            <font-awesome-icon :icon="['fas','fa-male']" style="margin-right: 5px;color: #00CAC9"></font-awesome-icon>
            <el-text>体重：{{ userInfoReport.weight  }}kg</el-text>
          </el-row>
          <el-row class="userBodyInfoItem">
            <font-awesome-icon :icon="['fas','fa-user']" style="margin-right: 5px;color: #00CAC9"></font-awesome-icon>
            <el-text>性别：{{ userInfoReport.sex }}</el-text>
          </el-row>
<!--          <el-row class="userBodyInfoItem">-->
<!--            <font-awesome-icon :icon="['fas','fa-calendar-alt']" style="margin-right: 5px;color: #00CAC9"></font-awesome-icon>-->
<!--            <el-text>生日：{{ userInfoReport.birthday }}</el-text>-->
<!--          </el-row>-->
          <el-row class="userBodyInfoImage">
            <img src="/src/assets/img/MBIBody.png" style="height: 6vw;width: 12vw" alt="">
          </el-row>
        </el-col>
        <el-col class="BMIInfo">
          <el-row class="userBodyInfoItem">
            <font-awesome-icon :icon="['fas','fa-clock']" style="margin-right: 5px;color: #00CAC9"></font-awesome-icon>
            <el-text>结束记录：{{ userInfoReport.lastModified_date}}</el-text>
          </el-row>


          <el-row class="userBodyInfoItem">
            <font-awesome-icon :icon="['fas','fa-calendar-alt']" style="margin-right: 5px;color: #00CAC9"></font-awesome-icon>
            <el-text>BMI：{{ bmi }}</el-text>
          </el-row>
          <el-row class="userBodyInfoImage">
<!--            <el-text>BMI 范围</el-text>-->
            <el-table :data="bmiData" border style="width: 232px; " :row-style="rowStyle" :cell-style="cellStyle" :header-cell-style="headerCellStyle">
              <el-table-column prop="category" label="分类" width="90"  ></el-table-column>
              <el-table-column prop="range" label="BMI范围" width="142"></el-table-column>
            </el-table>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="cardFooter">
        <el-col :span="1">
          <font-awesome-icon :icon="['fas','fa-lightbulb']" size="2x" style="color: #FDB800"></font-awesome-icon>
        </el-col>
        <el-col :span="23">
          <el-text>BMI 是身体质量指数（Body Mass Index）的缩写，它是一种衡量人体体重相对于身高的一种指数。BMI 通常用于初步评估一个人的体重是否处于正常范围、过轻、超重或肥胖</el-text>
        </el-col>
      </el-row>
    </el-container>
  </el-card>
</template>
<script setup>
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
import '@/assets/css/reportCard.css';
import {ref, onMounted, watch, onUnmounted} from "vue";

import {getUserDataByUid} from "@/api/copd/copdReport.js"
const userInfoReport=ref({})
const bmi=ref()
onMounted(() => {
  getUserInfoReport(props.currentReportId);
});
onUnmounted(()=>{

})
const props = defineProps({
  currentReportId: Number, // 根据currentReportId的类型进行修改
  currentReport:Object
});
console.log(props.currentReport)
//随时更新最新的数据
watch(() => props.currentReportId, (newId) => {
  getUserInfoReport(newId);
});
const loading = ref(false);
const getUserInfoReport = (reportId)=>{
  loading.value = false;
  getUserDataByUid(props.currentReport.userId,reportId).then((res)=>{
    userInfoReport.value=res.data
    if(("weight" in userInfoReport.value)&&("height" in userInfoReport.value)){
      bmi.value=((userInfoReport.value.weight)/(userInfoReport.value.height/100*userInfoReport.value.height/100)).toFixed(2)
    }
    if(("lastModified_date" in userInfoReport.value)){
      userInfoReport.value.lastModified_date=userInfoReport.value.lastModified_date.substring(0,10)
    }
    userInfoReport.value.birthday=userInfoReport.value.birthday
    if("createdDate" in userInfoReport.value){
      userInfoReport.value.createdDate=userInfoReport.value.createdDate.substring(0,10)
    }
  }).catch((err)=>{
    console.log(err)
  }).finally(() => {
    loading.value = false; // 使用箭头函数包装
  });
}

const bmiData = ref([
  { category: '偏瘦', range: '<=18.4' },
  { category: '正常', range: '18.5~23.9' },
  { category: '过重', range: '24.0~27.9' },
  { category: '肥胖', range: '>=28.0' },
]);
const rowStyle = ({ row, rowIndex }) => {
  const colors = ['#f0f9eb', '#e2f0cb', '#f5dab1','#fdb800' ];
  return { background: colors[rowIndex % colors.length] };
};
const cellStyle = () => {
  return { textAlign: 'center' };
};
const headerCellStyle = () => {
  return { textAlign: 'center' };
};

</script>

<style scoped>

.userBodyInfo,
.BMIInfo {
  flex: 1; /* 平均占据父容器的宽度 */
  margin: 2vh 2vw;
}

.userBodyInfoItem{
  display: flex;
  margin-top: 1vh;
  margin-bottom: 1vh;
  align-items: center;
}

.userBodyInfoImage{
  margin-top: 3vh;
}
</style>